<template lang="pug">
.survey-content-container
  .survey-content-header
    .survey-content-title 供应商产品销售概况
  el-form(:model="form" :rules="salesRules" ref="salesRules" label-width="150px" class="form-section-module" size="small")
    .survey-form
      .survey-form-title
        span 产品概况
        label
      .form-section
        el-form-item(label="经营产品品牌：" prop="supplierBrand")
          el-input(
            v-model="supplierBrand"
            ref="saveTagInput"
            placeholder="请输入产品品牌名称，输入完成后按回车键添加"
            @keyup.enter.native="handleInputConfirm('supplierBrand')"
            @blur="handleInputConfirm('supplierBrand')"
          )
          .form-item-tags
            el-tag(:key="index" v-for="tag, index in form.supplierBrand" closable :disable-transitions="false" @close="handleClose(index, 'supplierBrand')") {{tag}}
        el-form-item(label="主营产品介绍：" prop="productIntroduce")
          el-input(type="textarea" placeholder="请输入经营范围" v-model="form.productIntroduce" resize="none" rows="10" maxlength="1000" show-word-limit)
        el-form-item(label="产品手册：" prop="productManualList")
          .el-form-body
            .el-form-upload
              ali-upload(@getProgress="getProgress($event, 'manualFileList')" @getFileInfo="getFileInfo($event, 'productManualList')" multiple accept=".doc,.docx,.pdf" :fileAgain="fileAgain" @getAgainProgress="getAgainProgress($event, 'manualFileList')")
                el-button(name="survey") 选择附件
            .upload-info 支持格式： .doc .docx .pdf
            .file-item(v-for="item in form.manualFileList" :class="{ 'active': item.progress == 100 }")
              .file-item-name
                .file-item-progress_line(:style="{ 'width': `${item.progress}%` }" v-if="item.progress < 100")
                .iconfont.el-icon-document
                span {{item.fileName}}
              .file-item-handles
                .file-item-progress(v-if="item.progress < 100 && item.isSuccess != 2") {{item.progress}}%
                i.iconfont.el-icon-refresh-right(v-if="item.isSuccess == 2" @click="again(item)")
                i.iconfont.el-icon-close(v-if="item.isSuccess == 2 || item.progress == 100" @click="deleteFile(item, 'manualFileList', 'productManualList')")
        el-form-item(label="产品定位：" prop="productPositioning")
          el-checkbox-group(v-model="form.productPositioning")
            el-checkbox(v-for="item in dropDwon.productPositioningList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
        el-form-item(label="企业年销售额：" prop="productTotalSale")
          .form-item-small
            el-input(placeholder="请输入您的企业年销售额" v-model="form.productTotalSale" type="number")
              .form-item-input_ft(slot="suffix") 万元
        el-form-item(label="业务覆盖范围：" prop="businessCoverage")
          .form-item-small
            el-input(placeholder="请输入业务覆盖范围" v-model="form.businessCoverage")
        el-form-item(label="一般交货期：" prop="deliveryDay")
          .form-item-small
            el-input(placeholder="请输入天数" v-model="form.deliveryDay" type="number")
              .form-item-input_ft(slot="suffix") 天
    .survey-form
      .survey-form-title
        span 产品集采库
        label
      .form-section
        el-form-item(label="是否进入深圳市建筑工务署（单选）：" prop="inDepartment")
          el-radio-group(v-model="form.inDepartment")
            el-radio(v-for="item in dropDwon.inDepartmentList" :key="item.dicTypeValueId" :label="item.dicTypeValueId") {{item.dicTypeValue}}
        el-form-item(label="所在甲方品牌库：" prop="partyABrand")
          el-input(
            v-model="partyABrand"
            ref="saveTagInput"
            placeholder="请输入所在甲方品牌库名称,输入完成按回车键添加"
            @keyup.enter.native="handleInputConfirm('partyABrand')"
            @blur="handleInputConfirm('partyABrand')"
          )
          .form-item-tags
            el-tag(:key="index" v-for="tag, index in form.partyABrand" closable :disable-transitions="false" @close="handleClose(index, 'partyABrand')") {{tag}}
        el-form-item(label="所在甲方战采（集采）库：" prop="partyACollection")
          el-input(
            v-model="partyACollection"
            ref="saveTagInput"
            placeholder="请输入所在甲方战采（集采）库，输入完成按回车键添加"
            @keyup.enter.native="handleInputConfirm('partyACollection')"
            @blur="handleInputConfirm('partyACollection')"
          )
          .form-item-tags
            el-tag(:key="index" v-for="tag, index in form.partyACollection" closable :disable-transitions="false" @close="handleClose(index, 'partyACollection')") {{tag}}
        el-form-item(label="所在施工单位品牌库：" prop="constructionBrand")
          el-input(
            v-model="constructionBrand"
            ref="saveTagInput"
            placeholder="请输入所在施工单位品牌库名称，输入完成按回车键添加"
            @keyup.enter.native="handleInputConfirm('constructionBrand')"
            @blur="handleInputConfirm('constructionBrand')"
          )
          .form-item-tags
            el-tag(:key="index" v-for="tag, index in form.constructionBrand" closable :disable-transitions="false" @close="handleClose(index, 'constructionBrand')") {{tag}}
        el-form-item(label="所在施工单位战采（集采）库：" prop="constructionCollection")
          el-input(
            v-model="constructionCollection"
            ref="saveTagInput"
            placeholder="请输入所在施工单位战采（集采）库，输入完成按回车键添加"
            @keyup.enter.native="handleInputConfirm('constructionCollection')"
            @blur="handleInputConfirm('constructionCollection')"
          )
          .form-item-tags
            el-tag(:key="index" v-for="tag, index in form.constructionCollection" closable :disable-transitions="false" @close="handleClose(index, 'constructionCollection')") {{tag}}
        el-form-item(label="产品应用领域及主要客户简要介绍：")
          el-table(
            :data="form.customerList"
            border
            :header-cell-style="{ background: '#F8F7FC', fontSize: '14px', color: '#64698F' }"
          )
            el-table-column(label="客户名称")
              template(slot-scope="scope")
                el-input(v-model="scope.row.customerName" placeholder="请输入客户名称")
            el-table-column(label="使用材料品种规格")
              template(slot-scope="scope")
                el-input(v-model="scope.row.specification" placeholder="请输入使用材料品种规格")
            el-table-column(label="年订货额（万元）")
              template(slot-scope="scope")
                el-input(v-model="scope.row.annualOrderAmount" placeholder="请输入年订货额" type="number")
          .el-table-button
            el-button(name="survey" @click="addCustomer") 添加
  .survey-section-footer
    el-button(name="survey" plain @click="prevStep") 上一步，填写供应商概况
    el-button(name="survey" @click="nextStep") 下一步，选择供应商生产概况
</template>

<script>
import aliUpload from "@/components/customUpload"
export default {
  name: 'salesModule',
  props: {
    dropDwon: Object,
    parentForm: Object
  },
  components: {
    aliUpload
  },
  data () {
    var validateArray = (rule, value, callback) => {
      if (!this.form[rule.key].length) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }
    var validateFileList = (rule, value, callback) => {
      if (!this.form[rule.key].length) {
        callback(new Error(rule.message))
      } else {
        callback()
      }
    }
    return {
      partyABrand: '',
      partyACollection: '',
      constructionBrand: '',
      constructionCollection: '',
      authentication: '',
      supplierBrand: '',
      fileAgain: null,
      form: {
        manualFileList: [],
        supplierBrand: [],
        productIntroduce: '', // 主营产品介绍
        businessCoverage: '',
        productPositioning: [], // 产品定位（可多选）
        productTotalSale: '', // 企业年销售额
        inDepartment: '',
        productManualList: [], // 产品手册文件Id
        partyABrand: [], // 所在甲方品牌库
        partyACollection: [], // 所在甲方战采（集采）库
        constructionBrand: [], // 所在施工单位品牌库
        constructionCollection: [], // 所在施工单位战采（集采）库
        customerList: [], // 产品应用领域及主要客户简要介绍
      },
      salesRules: {
        supplierBrand: [
          { required: true, validator: validateArray, message: '请输入经营的产品品牌！', key: 'supplierBrand', trigger: 'blur' }
        ],
        productIntroduce: [
          { required: true, message: '请输入主营产品介绍！', trigger: 'blur' },
        ],
        productManualList: [
          { required: true, validator: validateFileList, message: '请上传相关证书资料！', key: 'productManualList', trigger: 'blur' }
        ],
        productPositioning: [
          { required: true, message: '请选择产品定位！', trigger: 'change' }
        ],
        productTotalSale: [
          { required: true, message: '请输入企业年销售额！', trigger: 'blur' }
        ],
        businessCoverage: [
          { required: true, message: '请输入业务覆盖范围！', trigger: 'blur' }
        ],
        productIntroduce: [
          { required: true, message: '请输入主营产品介绍！', trigger: 'blur' },
        ],
        deliveryDay: [
          { required: true, message: '请输入一般交货期！', trigger: 'blur' }
        ],
        inDepartment: [
          { required: true, message: '请选择是否进入深圳市建筑工务署！', trigger: 'change' }
        ],
        partyABrand: [
          { required: true, validator: validateArray, message: '请输入所在甲方品牌库名称！', key: 'partyABrand', trigger: 'blur' }
        ],
        partyACollection: [
          { required: true, validator: validateArray, message: '请输入所在甲方战采（集采）库！', key: 'partyACollection', trigger: 'blur' }
        ],
        constructionBrand: [
          { required: true, validator: validateArray, message: '请输入所在施工单位品牌库名称！', key: 'constructionBrand', trigger: 'blur' }
        ],
        constructionCollection: [
          { required: true, validator: validateArray, message: '请输入所在施工单位战采（集采）库！', key: 'constructionCollection', trigger: 'blur' }
        ],
      }
      
    }
  },
  methods: {
    getProgress (file, key) {
      this.setTempFileList(file, key)
    },
    getFileInfo (data, key) {
      this.form[key].push(...data)
    },
    setTempFileList (fileList, key) {
      fileList.forEach(item => {
        let index = this.form[key].findIndex(row => row.uid === item.uid)
        if (index > -1) {
          this.form[key][index] = item
        } else {
          this.form[key].push(item)
        }
      })
    },
    setItemFile (item, key) {
      let index = this.form[key].findIndex(row => row.uid === item.uid)
        if (index > -1) {
          this.$set(this.form[key], index, item)
        } else {
          this.form[key].push(item)
        }
    },
    again (item) {
      this.fileAgain = { ...item, isSuccess: 1 }
    },
    deleteFile (item, tempKey, formKey) {
      let tempIndex = this.form[tempKey].findIndex(row => row.uid === item.uid)
      let formIndex = this.form[formKey].findIndex(row => row.uid === item.uid)
      if (tempIndex > -1) {
        this.form[tempKey].splice(tempIndex, 1)
      }
      if (formIndex > -1) {
        this.form[formKey].splice(formIndex, 1)
      }
    },
    getAgainProgress (item, key) {
      this.fileAgain = null
      this.setItemFile(item, key)
    },
    handleInputConfirm (key) {
      let inputValue = this[key]
      if (inputValue) {
        this.form[key].push(inputValue)
      }
      this[key] = ''
    },
    handleClose (index, key) {
      this.form[key].splice(index, 1)
    },
    addCustomer () {
      this.form.customerList.push({
        customerName: '',
        specification: '',
        annualOrderAmount: ''
      })
    },
    prevStep () {
      this.$emit('change', { form: this.form, nextRouter: 'survey' })
    },
    nextStep () {
      this.$refs.salesRules.validate((valid) => {
        if (!valid) {
          this.$message.error('请仔细核对资料填写是否正确！')
          return
        }
        this.$emit('change', { form: this.form, nextRouter: 'yield' })
      })
    },
  },
  created () {
    this.form = { ...this.form, ...this.parentForm }
  }
}
</script>

<style lang="scss" scoped>
.survey-content-container {
  width: 100%;
  background: #fff;
  padding: 25px 22px;
}
.survey-content-header {
  display: flex;
  .survey-content-title {
    padding: 10px 16.5px;
    border-radius: 0 50px 50px 0;
    background: #d7000f;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
  }
}
.survey-form {
  margin-top: 5px;
  .survey-form-title {
    display: flex;
    align-items: center;
    padding: 16px 0;
    span {
      display: inline-block;
      font-size: 16px;
      line-height: 26px;
      padding-right: 10px;
    }
    label {
      height: 1px;
      flex: 1;
      background: #EDEDED;
    }
  }
}
.form-section {
  background: #F6F6F9;
  border-radius: 6px;
  padding: 25px 20px;
  &.form-small-section {
    margin-bottom: 16px;
  }
}
.el-form-body {
  padding: 15px;
  background: #fff;
  border-radius: 4px;
}
.el-form-upload {
  display: inline-block;
}
.upload-info {
  margin-top: 8px;
  font-size: 12px;
  line-height: 18px;
  color: #909399;
}
.file-item {
  display: flex;
  align-items: center;
  padding: 8px 4px;
  border-radius: 4px;
  border: 1px solid #fff;
  &.active {
    &:hover {
      background: #FEF0F0;
      border: 1px solid #FDE2E2;
    }
  }
  .file-item-name {
    position: relative;
    flex: 2;
    span {
      display: inline-block;
      margin-left: 10px;
    }
    .file-item-progress_line {
      position: absolute;
      width: 100%;
      height: 2px;
      background: #409EFF;
      bottom: 0;
      left: 0;
      border-radius: 0 0 20px 20px;
    }
  }
}
.file-item-progress {
  display: flex;
  justify-content: flex-end;
  width: 150px;
}
.file-item-handles {
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .iconfont {
    margin-left: 10px;
    font-size: 20px;
  }
}
.form-item-tags {
  margin-top: 15px;
  .el-tag {
    color: #d7000f;
    background-color: #fff;
    border-color: #d7000f;
  }
}
.survey-section-footer {
  margin-top: 22px;
  padding: 10px 0;
  text-align: center;
}
.el-table-button {
  margin-top: 10px;
}
.form-item-input_ft {
  padding: 0 10px;
  color: #000;
  line-height: 32px;
}
.form-item-small {
  width: 275px;
}
</style>